<template>
  <div class="Information">
    <div class="companyInformation">
      <div class="logo">
        <img src="../assets/logo.png" style="width:40px;margin-left: 12px;">
        <span>企智库人工智能数据分析平台</span>
      </div>
    </div>
    <div class="userInformation">
      <el-tooltip
        class="item"
        effect="dark"
        content="切换深色主题"
        placement="top"
      >
      <el-icon style="color: #fff; font-size: 22px; cursor: pointer; margin-right:10px" v-show="color === 'day'" @click="changeColor"><Sunny /></el-icon>
      </el-tooltip>
      <el-tooltip
        class="item"
        effect="dark"
        content="切换浅色主题"
        placement="top"
      >
      <el-icon style="color: #fff; font-size: 22px; cursor: pointer; margin-right:10px" v-show="color === 'night'" @click="changeColor"><Moon /></el-icon>
      </el-tooltip>
      <el-dropdown trigger="click">
        <span class="el-dropdown-link user">
          <el-icon class="el-icon-UserFilled"><UserFilled /></el-icon>
          {{ Name }}
          <el-icon class="el-icon--right"><caret-bottom /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item class="clearfix" @click="changePassword">修改密码</el-dropdown-item>
            <el-dropdown-item class="clearfix" @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
    <div>
    </div>
    <changePassWorld v-model="passWorldDialog" @closepassWorldDialog="closepassWorldDialog" @submit="logout"></changePassWorld>
</template>

<script>
import changePassWorld from './changePassWorld.vue'
import {connrequest} from '../api/connrequest'
export default {
  components:{
    changePassWorld
  },
  data(){
    return {
      passWorldDialog: false,
      avatar: '',
      color: '',
      Name: sessionStorage.getItem('Name')
    }
  },
  props: {
    name: {
      type: String, 
      default: '游客' 
    }
  },
  watch: {
    Name(value){
      
    }
  },
  created(){

  },
  mounted(){
    this.getNameFromCache()  
    this.color = localStorage.getItem('isNightMode')
    // this.getToken()
  },
  methods: {
    async changeColor(){
      this.color = this.color === 'day' ? 'night':'day'
      const oldValue = await connrequest("GetUserPreference")
      const data = {
        Data: {
          ...oldValue.Data,
          GPT: {
            isNightMode: this.color
          }
        }
      };
      const res = await connrequest("SetUserPreference",data);
      localStorage.setItem("isNightMode",this.color);
      if(res.Status.StatusCode === 0){
          this.$router.go(0);
      }
    },
    getNameFromCache(){
      setTimeout(() => {
        const Name = sessionStorage.getItem('Name');
        if (Name) {
          this.Name = Name || '游客';
        }
      }, 500);
    },
    changePassword(){
      this.passWorldDialog = true;
    },
    closepassWorldDialog(){
      this.passWorldDialog = false
    },
    logout(){
      sessionStorage.clear();
      this.$router.push('/')
    },
    
  },
}
</script>

<style lang="scss" scoped>
  .Information{
    // border-top: 1px solid #bdc2c0;
    // width: calc(100vw - 66px);
    position: fixed;
    top: 0;
    width: 100vw;
    height: 50px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #022139;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    .companyInformation{
      display: flex;
      align-items: center;
      .logo{
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: center;
        margin-left: 2px;
        width: auto;
        height: 30px;
        span {
          font-family: "PingFang SC", "Microsoft YaHei", sans-serif; /* 字体栈，按优先级尝试 */
          font-weight: 900;
          margin-left: 5px;
          font-size: 18px; /* 文字大小 */
          color: #fff; /* 文字颜色 */
        }
      }
      .slogan{
        padding-left: 10px;
        font-size: 14px;
        color: #409EFF;
      }
    }
    .userInformation{
      display: flex;
      align-items: center;
      margin-right: 20px;
      span{
        color: #fff;
      }
      .user{
        display: flex;
        align-items: center;
        margin-right: 10px;
        cursor: pointer;
        .el-icon-UserFilled{
          font-size: 20px;
          border-radius: 50%;
          margin-right: 10px;
          color: #000;
          background: #c0c4cc;
        }
      }
      
    }
    
  }

</style>